.file-upload-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .upload-area {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 40px;
    text-align: center;
    background-color: #fafafa;
    cursor: pointer;
    transition: border-color 0.3s ease;

    &:hover {
      border-color: #1976d2;
    }

    mat-icon {
      font-size: 48px;
      width: 48px;
      height: 48px;
      color: #666;
      margin-bottom: 16px;
    }

    p {
      margin: 8px 0;
      color: #666;
    }

    .hint-text {
      font-size: 12px;
      color: #999;
      margin-top: 16px;
    }
  }

  .file-info {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;

    .file-details {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      mat-icon {
        margin-right: 12px;
        color: #666;
      }

      .file-name-size {
        display: flex;
        flex-direction: column;

        .file-name {
          font-weight: 500;
          margin-bottom: 4px;
        }

        .file-size {
          font-size: 12px;
          color: #666;
        }
      }
    }

    .upload-progress {
      margin: 16px 0;

      .progress-info {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;
        color: #666;
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }
  }
}